<script setup>
import { ref } from 'vue';
//导入axios
import request from '../axios/axios.js';

//用户名字
let inputDepositId= ref("")
//展示信息
let showDormitoryId=ref("");
//用户id
let showUserId=ref("")
//充值费用
let showUserFee=ref("")
//充值记录id
let showDepositId=ref("")

//充值费用
async function updateDepositMonkey(){

   let {data} = await request.get("/alterDepositInfo",{
      params:{
         dormitoryId:showDormitoryId.value,
         userId:showUserId.value,
         userFee:showUserFee.value,
         depositId:showDepositId.value
      }
   })

   //根据成功失败输出结果

   if(data.statusCode==200){
      alert(data.message);
   }else{
      alert(data.message);
   }
}

//根据充值id查询
async function queryByDepositId(){
   let {data} = await request.get("/queryDepositById",{
      params:{
         depositId:inputDepositId.value
      }


   })
   //根据成功失败输出结果

   if(data.statusCode==200){

      //如果成功提示弹窗 并且修改信息
         showDormitoryId.value=data.data.userId;
         showUserId.value=data.data.dormitoryId;
         showUserFee.value=data.data.depositMonkey;
         showDepositId.value=data.data.depositId;
         alert(data.message);
   }else{
      //如果失败则情况信息
      alert(data.message);
   }

}
// //根据寝室id查询
// async function querryByDormitoryId(){
//    let {data} = await request.get("/queryDepositByDormitoryId",{
//       params:{
//          dormitoryId:inputDormitoryId.value
//       }
//    })

//    if(data.statusCode==200){

//       //如果成功提示弹窗 并且修改信息
//          showDormitoryId.value=""
//          showUserId.value=""
//          showUserFee.value=""
//        alert(data.message);
//    }else{
//        alert(data.message);
//    }

   
// }
</script>

<template>
    管理员水电费管理界面
    修改界面


    <div class="Dormitory">

        <div class="DormitoryName">
               
               水电费信息查询<input type="text" v-model="inputDepositId" /><button @click="queryByDepositId()">查询</button>
        </div>
        
        <div style="width: 100%; height: 80%;">
            <!-- 寝室信息展示 -->
            <table style="width: 100%; height: 100%;">
               <tr class="trb">
                    <td class="name">充值记录id</td ><td class="content"  > <input type="text"  readonly v-model="showDepositId" /></td>
                </tr>
                
                <tr class="trb">
                    <td class="name">用户名id</td ><td class="content"  > <input type="text"  v-model="showDormitoryId" /></td>
                </tr>
                <tr class="trb">
                    <td class="name">寝室id</td ><td class="content"  > <input type="text"  v-model="showUserId" /></td>
                </tr>
                <tr class="trb">
                    <td class="name">充值金额</td ><td class="content"  > <input type="text"  v-model="showUserFee" /></td>
                </tr>
                
                      
            </table>
            <div class="DormitoryName">
           
           修改充值记录:<button @click="updateDepositMonkey()">修改</button>
        </div>
        </div>
        
    </div>
</template>

<style scoped>


.name{   
      width: 10%;
   }
   .trb{
      background-color: beige;
      height: 10%;
   }
   .tb_content{
      width: 100%;
      height: 100%;
      background-color: rgb(238, 245, 205);
      /* background-image: url(../public/img/bg02.jpg);
      background-size: 100%; */
   }
   .trb:hover{
      background-color: chartreuse;
   }
   .trb:active{
      background-color:rgb(230, 26, 26);
   }
   /*
        用户查询
   */
   .Despoit{
    width: 100%;
    height: 80%;
    background-color: chocolate;
   }


   /* 
    寝室信息展示
   */
   .Dormitory{
    width: 100%;
    height: 20%;

   }
   .showQuery{
    width: 100%;
    height: 100%;

   }
   .DormitoryName{
    width: 100%;
    height: 20%;

   }
</style>
